<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<title></title>
<script type="text/javascript" src="<c:url value="/resources/jquery-1.7.1.min.js" /> "></script>
<script type="text/javascript" src="<c:url value="/resources/json.min.js" /> "></script>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/demo.css" /> " />

</head>
<body>
<div id="div-regForm">
<span id="infosuccess" style="color: green; display: none;">User Account created Succesfully !!</span>
<span id="errorDisplay" style="color: blue; display: none;"></span>
<div class="form-sub-title">New User</div>
<form:form id="userForm" modelAttribute="userForm" action="./user/create" method="post">
	<input type="hidden" name="id" value="-1"/>

	<table>
		
		<tr>
			<td valign="middle"><form:label id="userNameLabel" for="userName"
				path="userName">User Name</form:label></td>
				<td valign="top"><div class="input-container"><form:input path="userName" /></div></td>
		</tr>
			<tr>
				<td  valign="middle"><form:label id="firstNameLabel" for="firstName"
					path="firstName">First Name</form:label></td>
				<td valign="middle"><div class="input-container"><form:input path="firstName" /></div></td>
			</tr>

			<tr>
				<td  valign="middle"><form:label id="middleNameLabel" for="middleName"
					path="middleName" >Middle Name</form:label></td>
				<td><div class="input-container"><form:input path="middleName" /></div></td>
			</tr>

			<tr>
				<td  valign="middle"><form:label id="lastNameLabel" for="lastName"
					path="lastName">Last Name</form:label></td>
				<td><div class="input-container"><form:input path="lastName" /></div></td>
			</tr>

			<tr>
				<td  valign="top"><form:label id="emailLabel" for="email" path="email"
					>E-mail</form:label></td>
				<td><div class="input-container"><form:input path="email" /></div></td>
			</tr>
			
			<tr>
				<td colspan="3">&nbsp;</td>
			</tr>

			<tr>
				<td ><form:label id="passwordLabel" for="password"
					path="password">Password</form:label></td>
				<td><div class="input-container"><form:password path="password" /></div></td>
			</tr>
			<tr>
				<td valign="top"><form:label id="repasswordLabel" for="repassword"
					path="repassword">Re-Password</form:label></td>
				<td><div class="input-container"><form:password  path="repassword" /></div></td>
			</tr>
			<tr>
				<td rowspan="3"><input id="create" type="submit" value="Create"
					disabled="disabled" class="greenButton" /></td>
			</tr>
	</table>
</form:form>

</div>
</body>
<script type="text/javascript">	
		$(document).ready(function() {
			
			$('#userName').blur(function() {
					checkAvailability();
			});
			$("#userForm").submit(function() {
				var dataform = $(this).serializeObject();
				$.postJSON("./user/create", dataform , function (data){
					if(data.error){
							displayErrorMessagers(data);
					    }else{
					  		$("#userForm")[0].reset();$('#create').attr("disabled", true);
					 	 	$('.errors').remove();
					  		$("label").removeClass('ui-state-error ui-corner-all');
					  		$("#infosuccess").fadeIn(5000).fadeOut('slow');
					}});
				return false;				
			});
		});

		function checkAvailability() {
			$.getJSON("./user/isExist", { userName: $('#userName').val() }, function(userExist) {
				$('.errors').remove();
				$("label").removeClass('ui-state-error ui-corner-all');
					$('#create').removeAttr("disabled");
				if (userExist) {
					$('#create').attr("disabled", true);
					setFieldMessage("userName",  $('#userName').val() + " is not available, Please try anather username ");
					$('.errors').fadeIn(1000);
				}
			});
		}


		
		function displayErrorMessagers(data) {
			$('.errors').remove();
			$("label").removeClass('ui-state-error ui-corner-all');
			if(data.validationErrorMap!=null){
			$.each(data.validationErrorMap, function(key, value) { 
				setFieldMessage(key,value);
				});
			$('.errors').fadeIn(1000);
			}
			if(data.exceptionMessage!=null){
				$('#errorDisplay').html(data.exceptionMessage);
				$('#errorDisplay').fadeIn();
			}
			
		}

		function setFieldMessage( key , message ){
			$("#" + key + "Label").addClass("ui-state-error ui-corner-all");
			if ($("#" + key + "\\.errors").length == 0) {
				$("#" + key).after("<span id='" + key + ".errors' class='errors' style='display: none;'>" + message + "</span>");
			} else {
				$("#" + field + "\\.errors").html("<span id='" + key + ".errors' class='errors' style='display: none;'>" + message+ "</span>");		
			}
			
		}

	</script>

</html>
